<template>
  <bs-dialog v-model="visible" :title="title" :width="400" :confirm-btn-fn="handleConfirm">
    <bs-form ref="formRef" class="form-area" label-width="70px">
      <bs-form-item label="名称">
        <bs-input v-model="formData.addr" placeholder="请输入名称"></bs-input>
      </bs-form-item>
      <bs-form-item label="管理IP">
        <bs-input v-model="formData.addr" placeholder="请输入管理IP"></bs-input>
      </bs-form-item>
      <bs-form-item label="密码">
        <bs-input v-model="formData.addr" type="password" placeholder="请输入密码"></bs-input>
      </bs-form-item>
    </bs-form>
  </bs-dialog>
</template>
<script lang="ts" setup>
import {ref, nextTick} from 'vue'

const initFormData = () => ({
  addr: ''
})

const formRef = ref()
const visible = ref(false)
const title = ref('')
const info = ref()
const formData = ref(initFormData())

/**
 * 打开弹框
 */
const open = (item?:any) => {
  visible.value = true
  if (item) {
    title.value = '账户维护'
    info.value = item
    formData.value = {
      ...initFormData(),
      ...item
    }
  } else {
    title.value = '新建账户'
    formData.value = initFormData()
  }
  nextTick(() => {
    formRef.value.clearValidate()
  })
}

/**
 * 确定
 */
const handleConfirm = () => {
}

defineExpose({
  open
})

</script>
<style lang="scss" scoped>
.form-area {
  padding: 16px;
}
</style>
